<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素样式\尺寸操作</title>
        <!-- 元素样式操作：直接操作元素的样式下的属性和属性值
         css()      功能--
                     1个参：传入css属性名
                     功能：获取匹配元素集合中第一个元素的css的属性值
                     2个参：传入css属性名和属性值
					 功能：设置匹配元素集合中所有元素的css属性值
                     n个参：传入多个css属性名和属性值
					 语法糖：css({"属性名":"属性值",
					             "属性名":"属性值",
					              .....
								  "属性名":"属性值",
					             })
         width()和height() 功能：匹配元素集合中第一个元素宽高度
		                   无参：获取匹配元素集合中第一个元素宽高度
						   有参：设置匹配元素集合中第一个元素宽高度
						   width(数值)
         outerWidth和outerHeight()
		 出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		         无参：获取元素的宽高度，计算盒子模型：内边距+边框
		         有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 -->
         
         <style>
             div.box{
                 background-color: #eaddff;
                 margin: 20px;
                 padding: 20px;
                 border: 5px solid #c2ffdf;
             }
             div.result{
                 margin-top: 10px;
                 font-weight: 700;
             }
         </style>
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- css:.box添加样式：背景颜色、内外边距：20px 边框：5px
                 .result添加样式：上外边距：10px  字体加粗-->
        <!-- 创建两个div平行  6个按钮 -->
        <!-- 1.显示效果区域 -->
        <div class="box" id="targetBox"></div>
        <button id="getColorbtn">获取颜色属性值</button>
        <button id="setColorbtn">设置颜色属性值</button>
        <button id="setBtn">设置多属性效果</button>
        <button id="gsBtn">获取元素宽度/设置元素宽度</button>
        <button id="bpBtn">获取高度(内边距+边框)</button>
        <button id="bpmBtn">获取高度(内外边距+边框)</button>
        <!-- 2.结果提示功能区域 -->
        <div class="result" id="result"></div>
        <script>
            /* 1.点击 获取颜色属性值 按钮 获取颜色值并打印页面上*/
            $("#getColorbtn").click(function(){
                //获取css属性值方式：传入属性名即可
                var bgColor=$(".box").css("background-color");
                //页面上打印属性值
                $("#result").text("获取的属性值是"+bgColor);
            });
           /*2.点击 设置颜色按钮 按钮  设置颜色值并打印页面上*/
		    $("#setColorbtn").click(function(){
				//改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色");
			});
		   /*3.点击 设置多属性效果 按钮 圆、背景色、阴影*/
		     $("#setBtn").click(function(){
				 $(".box").css({"background-image":"url(../img/12.gif)",
				                "border":"5px solid #ff0",
								"width":"300px",
								"height":"300px",
								"background-size":"100% 100%",
								"border-radius":"50%",
								"box-shadow":"5px 5px 10px #ff0",
			 });
			 });
			 /*4.点击 获取 、设置宽度*/
			 $("#gsBtn").click(function(){
				 var w=$(".box").width();
				 $("#result").text("获取宽度是："+w+"px");
				 });
			 /*5.点击 获取高度 按钮 计算机box空间高度*/
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$("#result").text("获取高度为："+bp+"px");
			 }); 
			 $("#bpmBtn").click(function(){
			 	var bp=$(".box").outerHeight(true);
			 	$("#result").text("获取高度为："+bp+"px");
			  });
		</script>
	</body>
</html>